<template>
  <view class="page-container">
    <HeaderBar
        title="产品预订"
        navBarBgc="linear-gradient(180deg, rgba(186,209,194,1) 0%, rgba(207,223,212,1) 33%, rgba(230,238,233,1) 100%);"
    ></HeaderBar>
    <view class="provider-name">
      {{providerName}}
    </view>
    <view class="choose-date-container">
      <ChooseDate
        :startDate="startDate"
        @changeDate="changeDate"
      ></ChooseDate>
    </view>
    <view class="product-basic-info-container flex">
      <image
          class="product-img"
          :src="productInfoObj.headImageUrl"
      ></image>
      <view class="product-info-container flex flex-1 flex-col justify-between">
        <view class="header-container">
          <view class="product-name">{{productInfoObj.name}}</view>
          <view class="rule-container flex">
            <text
                v-for="(item,index ) in ruleList"
                :key="index"
                class="rule-item"
            >
              {{item}}
            </text>
          </view>
        </view>
        <view class="bottom-container flex items-end justify-between">
          <view class="price-container flex items-baseline">
            <view class="sale-price">{{productInfoObj.negotiatedPrice}}</view>
            <view class="market-price ml10" v-if="productInfoObj.price">¥{{productInfoObj.price}}</view>
          </view>
          <view class="stepper-container flex items-center">
            <i class="iconfont icon-jian" @click="changeNumber('decrement')"></i>
            <text class="pl20 pr20">{{number}}</text>
            <i class="iconfont icon-jia1" @click="changeNumber('increment')"></i>
          </view>
        </view>
      </view>
    </view>
    <view class="notice-container">
      <wd-notice-bar
          :text="productInfoObj.memo"
          background-color="#eeefe7"
          color="#D33700"
      >
        <template #prefix>
          <i
              class="iconfont icon-notice1 mr20 fs18"
              style="color:#D33700"
          ></i>
        </template>
      </wd-notice-bar>
    </view>
    <view class="product-other-container">
      <view class="first-title">套餐详情</view>
      <view class="set-menu-container mt30">
<!--        <view
            v-for="(item,index) in setMenuList"
            :key="index"
            class="food-package "
        >
          <view class="food-title">{{item.title}}</view>
          <view
              v-for="(foodItem,foodIndex) in item.list"
              :key="foodIndex"
              class="food-item flex items-end justify-between"
          >
            <text>{{foodItem.title}}</text>
            <view class="price-num-container">
              <text class="number">({{foodItem.number}}份)</text>
              <text class="price">￥{{foodItem.price}}</text>
            </view>
          </view>
        </view>-->
        <rich-text :nodes="productInfoObj.content"></rich-text>
      </view>
      <wd-divider custom-class="custom-food-divider"></wd-divider>
<!--      <view class="first-title">购买须知</view>
      <view class="buy-notice-container">
        购买须知
      </view>
      <wd-divider custom-class="custom-food-divider"></wd-divider>-->
      <view class="first-title">
        联系人
      </view>
      <view class="contact-container">
        <wd-input type="text" :no-border="false" label="联系人" v-model="contactObj.contactName" placeholder="请输入联系人" custom-class="custom-contact-input"/>
        <wd-input type="number" label="联系号码" v-model="contactObj.contactPhone" placeholder="请输入联系号码" custom-class="custom-contact-input"/>
      </view>
<!--      <wd-divider custom-class="custom-food-divider"></wd-divider>-->
      <view class="first-title">
        订单备注
      </view>
      <textarea
          :value="contentValue"
          class="text-area"
          placeholder="备注填写"
      ></textarea>
    </view>
    <view class="pay-container">
      <view class="pay-detail-container flex justify-between items-center">
        <view class="total-price-container">
          <text class="label">合计</text>
          <text class="total-price">￥{{computedTotalPrice}}</text>
        </view>
        <view class="reservation-btn" @click="handleCreateOrder">立即团购</view>
      </view>
      <view :style="{height: safeInsert + 'px'}"></view>
    </view>
  </view>
</template>

<script setup>

  import {onLoad} from "@dcloudio/uni-app";
  import {foodProductDetail} from "@/api/food";
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import ChooseDate from "@/components/ChooseDate/index.vue"
  import dayjs from "dayjs";
  import {createOrder} from "@/api/food";
  import {toPay} from "@/api/common";

  const providerName = ref("");
  const ruleList = ref([
      "随时退","到店用","全城可用"
  ]);
  const startDate = ref(dayjs().format("YYYY-MM-DD"));
  const number = ref(1);
  const setMenuList = ref([
    {
      title: "招牌菜",
      list: [
        {title: "土豆炒牛肉",number: 1,price: 58},
        {title: "粉条肉丝",number: 1,price: 38},
        {title: "牛肉汤",number: 1,price: 32},
      ]
    },
    {
      title: "素菜",
      list: [
        {title: "时令蔬菜",number: 1,price: 58},
        {title: "泡椒土豆丝",number: 1,price: 38},
        {title: "红烧茄子",number: 1,price: 32},
      ]
    }
  ]);
  const contentValue = ref("");
  const safeInsert = ref(0);
  const productId = ref("");
  const providerId = ref("");
  const contactObj = ref({
    contactName: "KK",
    contactPhone: "19889828981"
  });
  const productInfoObj = ref({
    name: "",
    headImageUrl: "",
    labelList:[],
    price: "",
    negotiatedPrice: "",
    memo: "",
    content: "",
  });

  const computedTotalPrice = computed(() => {
    return (number.value * productInfoObj.value.negotiatedPrice).toFixed(2);
  });
  const changeNumber = (type) => {
    switch (type) {
      case "increment":
        number.value += 1;
        break;
      case "decrement":
        if(number.value <= 1) return;
        number.value -= 1;
        break;
    }
  };
  const changeDate = (event) => {
    let { date } = event;
    startDate.value = date;
  };
  const queryFoodProductDetail = async () => {
    await foodProductDetail({id:productId.value}).then(res => {
      productInfoObj.value = res.result;
    });
  };
  const handleCreateOrder = async () => {
    let {contactName, contactPhone} = contactObj.value;
    if(!contactName || !contactPhone) {
      uni.showToast({
        icon: "none",
        title: "请完善联系人信息"
      });
      return;
    }
    let { headImageUrl, memo } = productInfoObj.value;
    await createOrder({
      productId: productId.value,
      comboNumber: number.value,
      merchantId: providerId.value,
      contactPhone: contactObj.value.contactPhone,
      contactName: contactObj.value.contactName,
      memo: contentValue.value,
      headImgUrl: headImageUrl,
      productDescribed: memo,
      useDate: startDate.value,
      // #ifdef APP
      source:1,
      // #endif
      // #ifdef MP-WEIXIN
      source:0,
      // #endif
    }).then(res => {
      handleToPay(res.result.orderId);
    });
  };
  const handleToPay = async (id) => {
    await toPay({type:"jsapi",id}).then(res => {
      let { appId,nonceStr, packageValue,paySign,signType,timeStamp } = res.result;
	  uni.navigateTo({
		url:`/ticketSubPack/pages/PaymentOrder/index?totalPrice=${computedTotalPrice.value}&timeStamp=${timeStamp}&nonceStr=${nonceStr}&packageValue=${encodeURIComponent(packageValue)}&signType=${signType}&paySign=${encodeURIComponent(paySign)}&orderId=${id}`
	  });
    });
  };

  onLoad((options) => {
    let {productId:_productId,providerId:_providerId, providerName: _providerName,} = options;
    productId.value = _productId;
    providerId.value = _providerId;
    providerName.value = _providerName;
    safeInsert.value = uni.getSystemInfoSync().safeAreaInsets.bottom;
    queryFoodProductDetail();
  });
</script>

<style lang="scss" scoped>
  .page-container {
    .provider-name {
      font-size: 29.17rpx;
      padding: 50rpx 27rpx;
      font-weight: bold;
      background: linear-gradient(180deg, rgba(231,239,234,1) 0%, rgba(239,244,241,1) 33%, rgba(255,255,255,1) 100%);
    }
    .provider-name:after {
      display: block;
      content: "";
      width: 264.5rpx;
      height: 7rpx;
      margin-top: 2rpx;
      background: linear-gradient(90deg, rgba(27,156,97,1) 0%, rgba(143,206,178,1) 47%, rgba(235,246,241,1) 100%);
    }
    .choose-date-container {
      padding:0 27rpx 30rpx 27rpx ;

    }
    .product-basic-info-container {
      padding: 0 27rpx;
      min-height: 166.5rpx;
      .product-img {
        width: 250rpx;
        height: 166.5rpx;
        border-radius: 10rpx;
      }
      .product-info-container {
        padding-left: 33rpx;
        .header-container {
          .product-name {
            font-size: 33.5rpx;
            font-weight: bold;
          }
          .rule-container {
            padding-top: 18.5rpx;
            .rule-item {
              font-size: 22.5rpx;
              border-radius: 10rpx;
              padding: 4rpx 12.5rpx ;
              margin-right: 10rpx;
              border: 1rpx solid #D33700;
              color: #D33700;
            }
          }
        }
        .bottom-container {
          padding-top: 20rpx;
          .price-container {
            .sale-price {
              font-size: 41.5rpx;
              font-weight: bold;
              color: #AA5414;
            }
            .sale-price:before {
              font-size: 22.5rpx;
              content: "￥";
            }
            .market-price {
              margin-left: 14rpx;
              font-size: 22.5rpx;
              color: #777777;
              text-decoration: line-through;
            }
          }
          .stepper-container {
            padding: 13rpx 16rpx;
            border-radius: 10rpx;
            background-color: #EEEFE7;
            .iconfont {
              color: #3d3d37;
              font-size:50rpx;
            }
          }
        }
      }
    }
    .notice-container {
      padding: 51.5rpx 27rpx 52rpx 27rpx;
    }
    .product-other-container {
      padding: 52rpx 27rpx 230rpx 27rpx;
      .set-menu-container {
        padding: 0 28rpx;
        .food-package {
          padding-top: 28rpx;
          .food-title {
            font-size: 25rpx;
            font-weight: bold;
            padding-bottom: 13rpx;
          }
          .food-item {
            font-size: 25rpx;
            margin-bottom: 3rpx;
            .price-num-container {
              .number {
                padding-right: 36rpx;
                color: #777777;
              }
            }
          }
        }
      }
      .buy-notice-container {
        padding: 28rpx 28rpx 0 28rpx;
      }
      .text-area {
        margin-top: 25.5rpx;
        border: 1rpx solid #C0C2B3;
        border-radius: 10rpx;
        padding: 14rpx;
        width: 96%;
      }
    }
    .pay-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fdffeb;
      .pay-detail-container {
        padding: 43.5rpx 53.5rpx 0 53.5rpx;
        .total-price-container {
          .label {
            font-size: 29.5rpx;
            font-weight: bold;
          }
          .total-price {
            font-size: 41.5rpx;
            font-weight: bold;
            color: #AA5413;
          }
        }
        .reservation-btn {
          padding: 25.5rpx 18rpx;
          border-radius: 10.5rpx;
          color: #FDFFEB;
          background-color: #AA5413;
        }
      }
    }
    .first-title {
      font-size: 29.17rpx;
      font-weight: bold;

    }
    .first-title:after {
      display: block;
      content: "";
      width: 128.5rpx;
      height: 7rpx;
      margin-top: 10rpx;
      background: linear-gradient(90deg, rgba(27,156,97,1) 0%, rgba(143,206,178,1) 47%, rgba(235,246,241,1) 100%);
    }
    .contact-container {
      :deep(.custom-contact-input) {
        border-bottom: 1rpx solid #c5c5c5;
        .wd-input__label {
          width: 120rpx !important;
        }
      }
      :deep(.custom-contact-input):last-child {
        margin-bottom: 40rpx;
      }
    }
    :deep(.custom-food-divider) {
      padding: 0 !important;
    }
  }
</style>
